<!-- <!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<title>模块管理</title>
	<link rel="stylesheet" href="../css/common2.css">
	<link rel="stylesheet" href="../css/skyblue/elements.css">
	<style>
		/* 默认 */
		.offer {
			width: 130px;
			height: 40px;
			background: #0086b6;
			color: white;
			text-align: center;
			line-height: 40px;
			font-size: 16px;
			margin-top: 40px;
			margin: 40px 5%;
		}

		.class {
			margin: 5% 10%;
		}

		.class h4 {
			font: 18px bold;
			margin: 8px 0;
		}

		.classs-block {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
		}

		.classs {
			text-align: center;
			width: 20%;
			margin: 10px 0;
			margin-left: 5%;
			padding: 5px 0;
			box-sizing: border-box;

		}

		.classs>span {
			width: 50%;
			display: inline-block;
			text-align-last: justify;
		}

		.classs>input {
			margin-right: 10px;
			cursor: pointer;
		}

		/* skyblue */
		.skyblue .classs {
			background-color: #eff8fd;
			border: 1px solid #d4eefc;
		}
	</style>
</head>

<body>
	<div id="app" :class="theme">

		<div class="class">
			<div>
				<div v-for="(list2,index) in list1" :key="index">
					<h4 v-if="list2.list2.length!=0"> {{list2.name}}</h4>
					<div v-if="list2.list2.length!=0" class="classs-block">
						<div v-for="(item,index) in list2.list2" :key="index" class="classs">
							<input type="checkbox" v-model="item.show">
							<span>{{item.name}}</span>
						</div>
					</div>
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-input-block">
					<input type="button" class="offer button-primary button-primary-medium" value="确认" @click="submit">
				</div>
			</div>
		</div>
	</div>

	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>

	<script src="../js/common.js"></script>

	<script>
		var schoolId = top_params().id;

		new Vue({
			el: "#app",
			data: {
				list1: [{
					name: '考勤管理',
					list2: [{
						name: '补签',
						key: 'punch'
					},
					{
						name: '请假',
						key: 'leave'
					},
					{
						name: '校车',
						key: 'bus'
					},
					]
				}, {
					name: '交互管理',
					list2: [{
						name: '班级通知',
						key: 'classNotice'
					},
					{
						name: '学校通知',
						key: 'notice'
					},
					{
						name: '作业管理',
						key: 'homework'
					},
					{
						name: '校园视频',
						key: 'live'
					},
					]
				}, {
					name: '校务管理',
					list2: [{
						name: '成绩管理',
						key: 'score'
					},
					{
						name: '学校食谱',
						key: 'cookbook'
					},
					{
						name: '公立课表',
						key: 'timetable'
					},
					{
						name: '打卡消课',
						key: 'lesson'
					},
					{
						name: '可视化放学',
						key: 'leaveSchool'
					},
					{
						name: '访客记录',
						key: 'guest'
					},
					{
						name: '添加学生',
						key: 'addStudent'
					}, {
						name: '商品/订单',
						key: 'pay'
					}]
				}],
			},
			created: function () {
				axios.get('/pc/school/' + schoolId).then(function (res) {
					this.init(res.data.hides || {});
				}.bind(this));
			},
			methods: {
				init: function (hides) {
					this.list1.forEach(function (it) {
						it.list2.forEach(function (it1) {
							Vue.set(it1, 'show', !hides[it1.key]);
						});
					});
				},
				submit: function () {
					var hides = {};
					this.list1.forEach(function (it) {
						it.list2.forEach(function (it1) {
							hides[it1.key] = !it1.show;
						});
					});
					axios.put('/pc/school', {
						id: schoolId,
						hides: hides
					}).then(function (res) {
						alert('成功。可刷新查看效果');
					});

				}
			},
			computed: {
				theme() {
					return localStorage['theme']
				}
			}
		});
	</script>
</body>

</html> -->